<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1">
    <meta name="description" content="Modern UI CSS">
    <meta name="author" content="Sergey Pimenov">
    <meta name="keywords" content="windows 8, modern style, modern ui, style, modern, css, framework">

    <link href="css/modern.css" rel="stylesheet">
    <link href="css/theme-dark.css" rel="stylesheet">

    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/google-analytics.js"></script>
    <script src="js/jquery.mousewheel.min.js"></script>
    <script src="js/github.info.js"></script>
	<script src="js/tile-slider.js"></script>

    <title>HiD iClass Security Analysis</title>

    <style>
        body {
            background: url(icon/wallpaper.jpg);
        }
    </style>

    <script>
        function Resize(){
            var tiles_area = 0;
            $(".tile-group").each(function(){
                tiles_area += $(this).outerWidth() + 80;

            });

            $(".tiles").css("width", 120 + tiles_area + 20);

            $(".page").css({
                height: $(document).height() - 20,
                width: $(document).width()
            });
        }

        function AddMouseWheel(){
            $("body").mousewheel(function(event, delta){
                var scroll_value = delta * 50;
                if (!jQuery.browser.chrome) {
                    document.documentElement.scrollLeft -= scroll_value;
                } else {
                    this.scrollLeft -= scroll_value;
                }
                return false;
            });
        }

        $(function(){

            Resize();
            AddMouseWheel();

        })
    </script>
</head>
<body class="modern-ui" onresize="Resize()">
<div class="page secondary fixed-header">
    <div class="page-header ">
        <div class="page-header-content">
            <div class="user-login">
                <a href="#">
                   
                </a>
            </div>

            <h1>HiD iClass Security Analysis</h1>
        </div>
    </div>

    <div class="page-region">
        <div class="page-region-content tiles">
		<br>
		<br>
		<br>
			<div class="tile-group">
				<div class="tile double double-vertical my-opacity bg-color-darken">
                    <div class="tile-content">
						<img src="icon/card.jpg" />
                    </div>				
                </div>
				
				<div class="tile double bg-color-green" data-role="tile-slider" data-param-period="3000">
                    <div class="tile-content icon">
                        <img src="icon/map.png" class="place-left"/>
                        <h3 style="margin-bottom: 5px;">Shirley Gong</h3>
                    </div>
                    
                    <div class="tile-content icon">
                        <img src="icon/Calendar.png" class="place-left"/>
                        <h3 style="margin-bottom: 5px;">Edward Han</h3>
                    </div>
                    
                    <div class="tile-content icon">
                        <img src="icon/stats.png" class="place-left"/>
                        <h3 style="margin-bottom: 5px;">Yonatan Indrajaya</h3>
                    </div>
                    
                    <div class="tile-content icon">
                        <img src="icon/mail.png" class="place-left"/>
                        <h3 style="margin-bottom: 5px;">Nathaniel Sham</h3>
                    </div>
                </div>
																		
			</div>
			
            <div class="tile-group">
                <div class="tile double double-vertical my-opacity bg-color-red">
                    <div class="tile-content icon">
                        <img src="icon/Search.png"/>
                    </div>
                    <div class="brand">
                        <div class="name">Introduction</div>
                    </div>
                </div>

                <div class="tile triple double-vertical my-opacity bg-color-blueDark">
                    <b class="check"></b>
                    <div class="tile-content icon">
                        <img src="icon/map.png" alt="" />
                    </div>
                    <div class="brand">
                        <span class="name">Approach</span>
                    </div>
                </div>

            </div>
			
            <div class="tile-group" style="width: 322px;">
                <div class="tile double bg-color-green my-opacity">
                    <div class="tile-content icon">
                        <img src="icon/Calendar.png"/>
                    </div>
                    <div class="brand">
                        <span class="name">Discussion</span>
                    </div>
                </div>

                <div class="tile double bg-color-darken my-opacity">
                    <div class="tile-content icon">
                        <img src="icon/setting.png"/>
                    </div>
                    <div class="brand">
                        <span class="name">Results & Conclusion</span>
                    </div>
                </div>
				
            </div>

            

            
        </div>
    </div>
</div>

 <p style="color:#FFFFFF; position:absolute; bottom:10px;padding: 0px;left: 0px; width: 425px; text-align: center;">EECE 412 Group 8</p>

</body>
</html>